<script setup>

import {deleteSysMenu, getSysMenu, listAllActionByMenuId, listSysMenu} from "@/api/system/menu";
import {getCurrentInstance, ref} from "vue";
import MenuForm from "@/views/system/menu/MenuForm.vue";

const {proxy} = getCurrentInstance();
const menuList = ref([]);
const menuFormRef = ref();
const menuTreeRef = ref();
const menuData = ref(null);
const activeMenuId = ref()
const menuActionData = ref([]);

const getList = () => {
  listSysMenu().then(resp => {
    menuList.value = []
    let menu = {menuId: 0, title: '根目录', children: []}
    menu.children = resp.data
    menuList.value.push(menu)
  })
  activeMenuId.value && loadMenuDetail();
  setTimeout(()=>{
    menuTreeRef.value && menuTreeRef.value.expandAll(true)
  },100)
}

const openMenu = (menuId, type) => {
  menuFormRef.value.open(menuId, type)
}

const deleteMenu = async (menuId) => {
  proxy.$modal.confirm('确定删除该菜单吗？').then(async () => {
    await deleteSysMenu(menuId);
    proxy.$modal.okNotify('删除成功');
    getList();
    activeMenuId.value && await loadMenuDetail();
  })
}

const getMenuDetail = async (e) => {
  if (activeMenuId.value === e.menuId) {
    activeMenuId.value = undefined;
    menuData.value = null;
  } else {
    activeMenuId.value = e.menuId
    activeMenuId.value !== 0 && await loadMenuDetail();
  }
}

const loadMenuDetail = async () => {
  const {data} = await getSysMenu(activeMenuId.value);
  menuData.value = data;
  await loadActionData();
}

const loadActionData = async () => {
  const {data} = await listAllActionByMenuId(activeMenuId.value);
  menuActionData.value = data;
}

getList()

</script>

<template>
  <div class="app-container">
    <div class="grid grid-cols-[1fr_2fr] grid-rows-[auto_1fr] col-span-2 gap-x-1.5rem">
      <a-tree
          ref="menuTreeRef"
          style="max-width: 600px"
          :data="menuList"
          key="menuId"
          :field-names="{
            key:'menuId',
            title:'customTitle',
            icon:'customIcon',
            children:'children'
          }"
      >
        <template #extra="data">
          <div class="custom-tree-node" :class="{'active-menu-item':activeMenuId === data.menuId}"
               @click="getMenuDetail(data)">
            <span>
              <Icon v-if="data.icon" :icon="data.icon" size="16px" color="#333" class="mr-1"/>
              {{ data.title }}
            </span>
            <div>
              <a-button type="text" @click="openMenu(data.menuId,'create')" v-hasPermission="['system:menu:add']">新增
              </a-button>
              <a-button :disabled="data.menuId === 0" class="ml-2" status="danger" type="text"
                        @click="deleteMenu(data.menuId)" v-hasPermission="['system:menu:delete']">
                删除
              </a-button>
            </div>
          </div>
        </template>
      </a-tree>
      <div>
        <a-empty v-if="menuData == null" description="请选择菜单查看详情"></a-empty>
        <template v-else>
          <a-descriptions
              :column="2"
              size="medium"
              bordered
          >
            <template #title>
              <a-space class="flex justify-between">
                <span>{{ menuData.menuName }}</span>
                <a-button type="primary" @click="openMenu(activeMenuId,'update')"
                          v-hasPermission="['system:menu:edit']">编辑
                </a-button>
              </a-space>
            </template>
            <a-descriptions-item label="路由名称">
              {{ menuData?.routeName }}
            </a-descriptions-item>
            <a-descriptions-item label="名称">
              {{ menuData?.menuName }}
            </a-descriptions-item>
            <a-descriptions-item label="路由地址">
              {{ menuData?.path }}
            </a-descriptions-item>
            <a-descriptions-item label="组件路径">
              {{ menuData?.component }}
            </a-descriptions-item>
            <a-descriptions-item label="菜单图标">
              <div class="flex items-center">
                <icon :icon="menuData?.icon" color="#333" size="14px" class="mr-2"/>
                <span class="text-gray-500">{{ menuData?.icon }}</span>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="是否显示">
              {{ menuData?.visible ? '否' : '是' }}
            </a-descriptions-item>
            <a-descriptions-item label="是否禁用">
              {{ menuData?.status ? '是' : '否' }}
            </a-descriptions-item>
            <a-descriptions-item label="排序">
              {{ menuData?.orderNum }}
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions
              class="mt--20px"
              :column="2"
              size="medium"
          >
            <template #title>
              <a-space class="flex justify-between">
                <span>按钮</span>
                <a-button type="primary" @click="openMenu(activeMenuId,'create')" v-hasPermission="['system:menu:add']">
                  新增
                </a-button>
              </a-space>
            </template>
          </a-descriptions>
          <a-table
              :data="menuActionData"
              :bordered="true"
          >
            <template #columns>
              <a-table-column data-index="menuName" title="名称"/>
              <a-table-column data-index="perms" title="权限标识"/>
              <a-table-column data-index="orderNum" title="排序"/>
              <a-table-column fixed="right" title="操作" :width="200">
                <template #cell="record">
                  <a-button class="ml-2" type="text" @click="openMenu(record.menuId,'update')"
                            v-hasPermission="['system:menu:edit']">编辑
                  </a-button>
                  <a-button class="ml-2" status="danger" type="text" @click="deleteMenu(record.menuId)"
                            v-hasPermission="['system:menu:delete']">
                    删除
                  </a-button>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </div>
    </div>
    <menu-form ref="menuFormRef" @success="getList"/>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-tree-node) {
  padding: 3px 0;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;

  span {
    @apply flex items-center;
  }
}

.active-menu-item {
  color: rgb(var(--primary-6));
}
</style>
